<template>
  <div id="breadcrumb" class="flex align-items-center">
    <svg-icon
      v-if="invisibleSidebar"
      icon-name="sprite_icons_unstaged"
      class-name="s24 pointer"
      @click.native="toggleSidebar"
    />
    <ws-breadcrumb :breadcrumb="breadcrumb" separator-class="el-icon-arrow-right" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import WsBreadcrumb from './ws/ws-breadcrumb';

export default {
  name: 'Breadcrumb', // 学习空间内专用的面包屑
  components: { WsBreadcrumb },
  props: {
    inDoc: { // 在文档展示页面中时启用更多
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState(['currentSpace', 'sidebarCollapsed', 'invisibleSidebar', 'currentUser', 'currentGroup']),
    breadcrumb() {
      const pathArr = this.$route.path.split('/');
      const breadcrumb = [];
      if (pathArr[1] === this.$rp.SPACES) {
        breadcrumb.push({ label: '学习空间', path: '/' });
        if (pathArr[2] === this.$rp.CREATE) {
          breadcrumb.push({
            label: '新建学习空间',
            path: this.$route.path,
          });
        }
        if (Object.keys(this.currentSpace).length) {
          breadcrumb.push({
            label: this.currentSpace.title,
            path: `/${this.$rp.SPACES}/${this.currentSpace.id}`,
          });
          breadcrumb.push(...this.spaceBreadcrumb);
        }
      } else if (pathArr[1] === this.$rp.USERS) { // 用户路由仅限个人中心这块，用户展示么有用到面包屑
        const userShowPath = `/${this.$rp.USERS}/${this.currentUser.id}`;
        breadcrumb.push({ label: this.currentUser.nickname, path: userShowPath });
        breadcrumb.push(...this.userBreadcrumb);
      } else if (pathArr[1] === this.$rp.GROUPS) { // 群组的面包屑
        breadcrumb.push({ label: '学习群组', path: `/${this.$rp.GROUPS}` });
        if (pathArr[2] === this.$rp.CREATE) {
          breadcrumb.push({
            label: '新建学习群组',
            path: this.$route.path,
          });
        }
        if (Object.keys(this.currentGroup).length) {
          breadcrumb.push({
            label: this.currentGroup.title,
            path: `/${this.$rp.GROUPS}/${this.currentGroup.id}`,
          });
          breadcrumb.push(...this.groupBreadcrumb);
        }
      } else if (pathArr[1] === this.$rp.FEEDBACK) {
        breadcrumb.push({ label: '意见反馈', path: `/${this.$rp.FEEDBACK}` });
        if (pathArr[2] === this.$rp.CREATE) {
          breadcrumb.push({
            label: '新建反馈',
            path: this.$route.path,
          });
        }
      } else breadcrumb.push({ label: '[面包屑加载出错]', err: true });
      return breadcrumb;
    },
    spaceBreadcrumb() {
      const pathArr = this.$route.path.split('/');
      const spaceId = this.$route.params.spaceId;
      const breadcrumb = [];
      for (let i = 3; i < pathArr.length; i += 1) {
        if (pathArr[3] === this.$rp.SPACE_RESOURCES && i > 3) {
          if (this.inDoc) breadcrumb.push(...this.spaceDocsBreadcrumb);
          if (pathArr[4].indexOf(this.$rp.CREATE) === 0) {
            breadcrumb.push({
              label: '创建资源',
              path: this.$route.path,
            });
          }
          break;
        } else if (pathArr[3] === this.$rp.SPACE_ISSUES && i > 3) {
          if (pathArr[4] === this.$rp.CREATE) {
            breadcrumb.push({
              label: '创建问题',
              path: this.$route.path,
            });
            break;
          } else if (pathArr[5] === this.$rp.UPDATE) {
            breadcrumb.push({
              label: this.$store.state.currentIssue.title,
              path: `/${this.$rp.SPACES}/${spaceId}/${this.$rp.SPACE_ISSUES}/${this.$route.params.issueId}`,
            });
            breadcrumb.push({
              label: '编辑问题',
              path: this.$route.path,
            });
            break;
          } else {
            breadcrumb.push({
              label: this.$store.state.currentIssue.title,
              path: this.$route.path,
            });
            break;
          }
        } else if (pathArr[3] === this.$rp.SPACE_CONTRIBUTIONS && i > 3) {
          breadcrumb.push({
            label: `#${this.$route.params.contribId}`,
            path: this.$route.path,
          });
        } else {
          breadcrumb.push({
            label: this.$rp.SPACE_CN[pathArr[i]],
            path: `/${this.$rp.SPACES}/${spaceId}/${pathArr[i]}`,
          });
        }
      }
      return breadcrumb;
    },
    spaceDocsBreadcrumb() {
      const spaceId = this.$route.params.spaceId; // 空间id
      const tree = this.Base64.decode(this.$route.params.pathMatch || '');
      const treeItems = tree.split('/');
      const itemsLength = treeItems.length; // 记录原始长度
      const rootPath = `/${this.$rp.SPACES}/${spaceId}`;
      const breadcrumb = [];
      const isEdit = this.$route.path.split('/')[4].indexOf(this.$rp.UPDATE) === 0;

      for (let i = 0; i < itemsLength; i += 1) { // 以原始长度判断循环次数
        let validPath = `${rootPath}/${this.$rp.SPACE_RESOURCES_TREE}${this.Base64.encodeURI(treeItems.join('/'))}`;
        if (treeItems.length >= 2) { // 目录还没遍历完时
          if (i === 0) {
            validPath = `${rootPath}/${this.$rp.SPACE_RESOURCES_DOCS}${this.Base64.encodeURI(treeItems.join('/'))}`;
          }
          const current = treeItems[treeItems.length - 1];
          breadcrumb.unshift({
            label: current.substring(current.indexOf('-') + 1),
            path: validPath,
          });
        }
        treeItems.pop(); // 处理完一次就丢掉最后一个
      }

      if (isEdit) {
        breadcrumb.push({
          label: '编辑资源',
          path: this.$route.path,
        });
      }

      return breadcrumb;
    },
    userBreadcrumb() {
      const currentSettings = this.$route.path.split('/')[3] || this.$rp.PASSWORD;
      const breadcrumb = [];
      breadcrumb.push({
        label: this.$rp.USER_SETTINGS_CN[currentSettings],
        path: `/${this.$rp.USERS}/${this.$rp.SETTINGS}/${currentSettings}`,
      });
      return breadcrumb;
    },
    groupBreadcrumb() {
      const groupId = this.$route.params.groupId;
      const current = this.$route.path.split('/')[3] || this.$rp.HOMEPAGE;
      return [{
        label: this.$rp.GROUPS_CN[current],
        path: `/${this.$rp.GROUPS}/${groupId}/${current}`,
      }];
    },
  },
  methods: {
    ...mapActions(['setSidebarCollapsed']),
    // 小屏幕下的打开侧边栏
    toggleSidebar() { this.setSidebarCollapsed(!this.sidebarCollapsed); },
  },
};
</script>

<style></style>
